<template>
  <div class="page">
    <ul class="lot-c-lis" v-if="list.length">
      <li v-for="item in list" :key="item.question.questionId">
        <a href="javascript:void(0)" @click="navToDetail(item)">
          <div class="title ftz16">{{item.question.questionContent}}</div>
          <div class="photo-img">
            <a href="javascript:void(0)" @click.stop="$router.push('/dashboard/qa/' + item.questionedUser.userId)" class="photo-level">
              <span class="photo-s">
                <img :src="item.questionedUser.avatar" :alt="item.questionedUser.authName">
                <span :class="[`level`,`level_${item.questionedUser.authType}`,`mini`]"></span>
              </span>
            </a>
            <span class="icon-mid" v-if="item.certificated">
              <img src="../../assets/res/img/icon_appr.png">
            </span>
            <span class="price" v-if="item.question.payment > 0">
              <span class="icon-coin"></span>{{parseFloat(item.question.payment)}}</span>
            <span class="price" v-else>免费</span>
          </div>
          <div class="info fr">
            <router-link :to="'/dashboard/qa/' + item.questionedUser.userId" class="name">{{item.questionedUser.authName}}</router-link>
            <span class="line"></span>
            <span class="lab">擅长：{{item.questionedUser.field}}</span>
            <span class="line"></span>
            <span class="lab">回答：{{item.questionedUser.answerCount ? item.questionedUser.answerCount : 0}}</span>
            <!-- 基本逻辑:
            1. 免费问题直接显示内容
            2. 付费问题：
              (1). 我是提问人，直接显示查看按钮
              (2). 我是回答人，直接显示查看按钮
              (3). 我不是提问人，也不是回答人，但是已经购买，直接显示查看按钮
              (3). 我不是提问人，也不是回答人，也没有购买，直接解锁查看大咖回答按钮 -->
            <div class="txt" v-if="item.question.payment > 0">
              <img src="../../assets/res/img/res_mask.png">
              <template v-if="getQuestionForMeStatus(item) === 1">
                <router-link :to="'/qa/' + item.question.questionId" class="look">查看详情</router-link>
              </template>
              <a v-else class="unlock" href="javascript:void(0)" @click.stop.prevent="showBuyTipsBox(item)">
                <i class="icon"></i>解锁查看大咖回答
              </a>
            </div>
            <div v-else class="txt">{{item.answerShort}}</div>
            <div class="tips">
              <span class="mr16">{{item.question.createTime | parseTime('{m}-{d} {h}:{i}')}}</span>
              <span>分类：{{item.question.fieldName}}</span>
              <span class="fr">
                <a class="mr16" href="javascript:void(0)">
                  <i class="icon icon-share"></i>分享</a>
                <a class="mr16" href="javascript:void(0)" @click.stop.prevent="collect(item)">
                  <i class="icon icon-collet" :class="{on: item.questionFollow === '1'}"></i>
                  <span>{{item.questionFollow === '0' ? '收藏':'取消收藏'}}</span>
                </a>
                <a href="javascript:void(0)" @click.stop.prevent="star(item)">
                  <i class="icon icon-praise" :class="{on:item.questionStar === '1'}"></i>
                  {{item.question.countStar}}
                </a>
              </span>
            </div>
          </div>
        </a>
      </li>
    </ul>
    <!-- <NoDataTips v-else/> -->
    <PayType v-show="showPayTypeBoxFlag" businessType="1" :questionInfo="questionPayInfo" @closeFn="closePayTypeBox" />
  </div>
</template>

<script type="text/ecmascript-6">
import PayType from '@/components/questionAnswer/pay-type'
import {
  buyQuestion,
  followQuestion,
  unFollowQuestion,
  starQuestion
} from '@/service/api'
export default {
  props: ['list'],
  computed: {
    userId () {
      return this.$store.state.me.sysUser.userId
    }
  },
  data () {
    return {
      showPayTypeBoxFlag: false,
      // 支付信息
      // curList: [],
      questionPayInfo: {
        questionId: 0,
        businessId: 0,
        payAmount: 0.01
      }
    }
  },
  // watch: {
  //   list (val) {
  //     this.curList = []
  //     this.curList = Object.assign(val)
  //   }
  // },
  // mounted () {
  //   this.curList = Object.assign(this.list)
  // },
  methods: {
    /*  基本逻辑:
    * 1. 免费问题直接显示内容    return 0
    * 2. 付费问题：
    *   (1). 我是提问人，直接显示查看按钮    return 1
    *   (2). 我是回答人，直接显示查看按钮    return 1
    *   (3). 我不是提问人，也不是回答人，但是已经购买，直接显示查看按钮      return 1
    *   (4). 我不是提问人，也不是回答人，也没有购买，直接解锁查看大咖回答按钮      return 2
    */
    getQuestionForMeStatus (item) {
      let payAmount = item.question.payment
      if (payAmount === 0) {
        return 0
      }
      let flag1 = item.question.createUserId === this.userId
      let flag2 = item.questionedUser.userId === this.userId
      let flag3 = (item.questionBuyerStatus === '1' && item.question.createUserId !== this.userId)
      if (flag1 || flag2 || flag3) {
        return 1
      } else {
        return 2
      }
    },
    showBuyTipsBox (item) {
      if (!this.userId) {
        window.layui.layer.msg('请登录后再购买！')
        return
      }
      let title = '确认解锁该问题吗?'
      this.showConfirmBox(title, () => {
        this.showBuyQuestionBox(item)
      })
    },
    showConfirmBox (title, callback) {
      window.layer.open({
        type: 1,
        offset: 'auto',
        id: 'layerDemo' + 'auto', // 防止重复弹出
        content: '<div style="padding: 20px 100px;">' + title + '</div>',
        btn: '确认',
        btnAlign: 'c',
        shade: 0,
        yes: function () {
          callback()
          if (window.layer) {
            window.layer.closeAll()
          }
        }
      })
    },
    /**
     * 购买问题
     */
    async showBuyQuestionBox (item) {
      let questionId = item.question.questionId
      this.showPayTypeBoxFlag = true
      let res = await buyQuestion(questionId)
      if (res.data) {
        this.questionPayInfo = {
          questionId: questionId,
          businessId: res.data.id,
          payAmount: res.data.payment
        }
        this.showPayTypeBoxFlag = true
      }
    },
    /**
     * 购买问题
     */
    navToDetail (item) {
      let statuForMe = this.getQuestionForMeStatus(item)
      if (statuForMe === 0) {
        this.$router.push('/qa/' + item.question.questionId)
      } else {
        if (!this.userId) {
          window.layui.layer.msg('请登录后再查看！')
          return
        }
        // 已经购买，或者是我提问的，直接调整到问题详情
        if (statuForMe === 1) {
          this.$router.push('/qa/' + item.question.questionId)
        } else {
          // 需要购买
          this.showBuyTipsBox(item)
        }
      }
    },
    closePayTypeBox () {
      this.showPayTypeBoxFlag = false
      this.showBuyQuestionBox()
      this.$emit('closeFn')
    },
    // 收藏
    collect (item) {
      if (!this.userId) {
        window.layui.layer.msg('请登录后再收藏！')
        return
      }
      if (item.questionFollow === '0') {
        this.execCollect('1', item) // 收藏
      } else {
        let title = '确认取消收藏该问题吗?'
        this.showConfirmBox(title, () => {
          this.execCollect('0', item) // 取消收藏
        })
      }
    },
    async execCollect (target, item) {
      let res = null
      if (target === '0') {
        res = await unFollowQuestion({ questionId: item.question.questionId })
      } else {
        res = await followQuestion({ questionId: item.question.questionId })
      }
      if (res.data === null) {
        item.questionFollow = target
      }
    },
    // 点赞
    async star (item) {
      if (!this.userId) {
        window.layui.layer.msg('请登录后再点赞！')
        return
      }
      if (item.questionStar === '1') {
        return
      }
      let target = '1'
      // if (item.questionStar === '1') {
      //   target = '0'
      // }
      let res = await starQuestion({ questionId: item.question.questionId, questionStar: target })
      if (res.data === null) {
        item.questionStar = target
        if (target === '1') {
          item.question.countStar++
        }
      }
    }
  },
  components: {
    PayType
  }
}
</script>

<style scoped lang="scss">
$icon: "../../assets/res/img/icon_re.png";
.lot-c-lis li {
  padding: 20px 14px;
  border-bottom: 1px solid #e6e6e6;
}
.lot-c-lis .title {
  font-weight: bold;
  max-width: 100%;
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-bottom: 16px;
}
.lot-c-lis .photo-img {
  height: 110px;
  width: 64px;
  display: inline-block;
  vertical-align: top;
  position: relative;
}
.lot-c-lis .photo-s {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  display: block;
}
.lot-c-lis .photo-s img {
  width: 100%;
  height: 100%;
}
.lot-c-lis .photo-img .icon-mid {
  position: absolute;
  right: 8px;
  top: 50px;
}
.lot-c-lis .price {
  width: 60px;
  height: 28px;
  color: #e94f4f;
  display: block;
  background-color: #fff2e2;
  border-radius: 14px;
  text-align: center;
  line-height: 28px;
  margin: 18px auto 0 auto;
}
.lot-c-lis .info {
  display: inline-block;
  width: 750px;
  height: 110px;
  position: relative;
}
.lot-c-lis .name {
  color: #00a0e9;
  font-weight: bold;
  display: inline-block;
  vertical-align: middle;
  margin-top: -8px;
}
.lot-c-lis .line {
  display: inline-block;
  width: 1px;
  height: 14px;
  background-color: #cccccc;
  margin: 0 8px;
}
.lot-c-lis .lab {
  color: #808080;
  display: inline-block;
  vertical-align: middle;
  margin-top: -8px;
}
.lot-c-lis .txt {
  color: #484848;
  margin-top: 10px;
  height: 48px;
  line-height: 24px;
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  word-break: break-all;
}
.lot-c-lis .txt img {
  width: 100%;
  height: 100%;
}
.lot-c-lis .txt .unlock {
  position: absolute;
  width: 172px;
  height: 34px;
  line-height: 34px;
  color: #fff;
  background-color: #e94f4f;
  border-radius: 17px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  text-align: center;
}
.lot-c-lis .txt .unlock .icon {
  display: inline-block;
  vertical-align: middle;
  height: 14px;
  width: 14px;
  background-image: url($icon);
  background-repeat: no-repeat;
  background-position: 0 -36px;
  margin-right: 8px;
}
.lot-c-lis .txt .look {
  position: absolute;
  width: 92px;
  height: 34px;
  line-height: 34px;
  color: #fff;
  background-color: #00a0e9;
  border-radius: 17px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  text-align: center;
}
.lot-c-lis .tips {
  color: #808080;
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
}
.lot-c-lis .tips .mr16 {
  margin-right: 16px;
}
.lot-c-lis .tips a {
  color: #808080;
}
.lot-c-lis .tips .icon {
  display: inline-block;
  vertical-align: middle;
  height: 20px;
  width: 20px;
  background-image: url($icon);
  background-repeat: no-repeat;
  margin-right: 6px;
}
.lot-c-lis .tips .icon-share {
  background-position: -66px -33px;
}
.lot-c-lis .tips .icon-collet {
  background-position: -127px -33px;
}
.lot-c-lis .tips .icon-praise {
  background-position: -191px -33px;
}
.lot-c-lis .tips .icon-collet.on {
  background-position: -127px 0;
}
.lot-c-lis .tips .icon-praise.on {
  background-position: -191px 0;
}
.lot-c-lis .load-more {
  display: block;
  width: 94%;
  height: 38px;
  border: 1px solid #e6e6e6;
  color: #808080;
  border-radius: 5px;
  background: #fff;
  margin: 20px auto;
}
.ans-r {
  margin-top: 40px;
}
.ans-r .ans-rank {
  margin-top: 30px;
}
</style>
